<template>
  <div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      highlight-current-row
      @current-change="handleSelectionChange"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <!-- <el-table-column
        prop="status"
        label="状态"
        sortable
        :formatter="PMStatus"
      ></el-table-column> -->
      <!-- <el-table-column prop="category" label="品类" sortable></el-table-column> -->
      <el-table-column prop="commodity" label="品名" sortable></el-table-column>
      <el-table-column prop="id" label="品名ID" sortable></el-table-column>
      <el-table-column
        prop="commodity_unit"
        label="商品单位"
        sortable
        :formatter="SPFormat"
      ></el-table-column>
      <el-table-column
        prop="measure_unit"
        label="计量单位"
        sortable
        :formatter="JLFormat"
      ></el-table-column>
      <!-- <el-table-column
        prop="tax_typeName"
        label="税种"
        sortable
      ></el-table-column> -->
      <!-- <el-table-column
        prop="start_date"
        label="开始日期"
        sortable
      ></el-table-column> -->
      <!-- <el-table-column prop="rate" label="税率" sortable></el-table-column> -->
      <el-table-column prop="brand" label="品牌" sortable></el-table-column>
      <el-table-column prop="origin" label="产地" sortable></el-table-column>
      <el-table-column prop="standard" label="规格" sortable></el-table-column>
      <el-table-column
        prop="attribute"
        label="主属性"
        sortable
      ></el-table-column>
      <el-table-column prop="desc" label="备注" sortable></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="closeBtn"
        style="margin-left:92%"
        size="mini"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { spotCommodity } from "@/api/url_info.js";
export default {
  //品名弹框
  name: "tradeName",
  props: ["closeValue", "row"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let that = this;
      await spotCommodity(that.searchData)
        .then(res => {
          that.tableData = [];
          let data = res.result.results;
          that.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            that.tableData[i] = {
              status: data[i].tax_type["status"],
              category: data[i]["category"],
              commodity: data[i]["name"],
              id: data[i]["id"],
              commodity_unit: data[i]["commodity_unit"],
              measure_unit: data[i]["measure_unit"],
              tax_typeName: data[i].tax_type["name"],
              start_date: data[i].tax_type["start_date"],
              rate: data[i].tax_type["rate"],
              brand: data[i].commodity_spot[0]["brand"],
              origin: data[i].commodity_spot[0]["origin"],
              standard: data[i].commodity_spot[0]["standard"],
              attribute: data[i].commodity_spot[0]["attribute"],
              desc: data[i]["desc"]
            };
          }
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.getData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.getData();
    },
    closeBtn() {
      if (this.closeValue == "TypeBiome") {
        this.$emit("closeMoule", this.multipleSelection);
      }
    }
  }
};
</script>
